<template>
  <el-collapse-item name="record">
    <template slot="title">
      <PartitionTitle title="异常处理节点"></PartitionTitle>
    </template>

    <el-form>
      <el-form-item label="当前状态" style="width: 100%;">
        <div class="text-value">{{statusMap[abnormalData.status]}}</div>
      </el-form-item>
    </el-form>

    <el-timeline>
      <el-timeline-item
        :color="index == 0 ?'#34855b' : ''"
        v-for="(activity, index) in recordsList"
        :key="index"
        type="info"
        size="large">
        <span class="time">{{activity.handleTime}}</span>
        <div>{{handleMap[activity.handleType]}}</div>
        <template v-if='index == 0'>
          <div class="handler">{{abnormalData.abnormalTypeName}}</div>
        </template>
        <template v-else>
          <div class="handler">{{activity.handleName}}
            <span class="processedName" v-if='activity.handleType == 3'>转办至{{activity.processedName}}</span>
          </div>
          
          <!-- 忽略 -->
          <template v-if='activity.handleType == 5'>
            <div class="handler">忽略原因：{{activity.ignoreName}}</div>
            <div class="handler" v-if='activity.handleDes'>说明：{{activity.handleDes}}</div>
          </template>
          
          <!-- 转办 -->
          <template v-if='activity.handleType == 3'>
            <div class="handler" v-if='activity.handleDes'>备注：{{activity.handleDes}}</div>
          </template>
        </template>
      </el-timeline-item>
    </el-timeline>
  </el-collapse-item>
</template>
<script>
  import {handleMap,statusMap} from "../enum.js"
export default {
  props:{
    recordsList:{
      type:Array,
      default:()=>[]
    },
    abnormalData:{
      type:Object,
      default:()=>{}
    }
  },
  data() {
    return {
      handleMap,
      statusMap
    };
  },
};
</script>
<style lang="scss" scoped>
.block-title {
  margin-bottom: 0;
}
.el-timeline {
  margin: 0 160px;
}
.el-timeline-item__content{
  position:relative;
}
.time {
  position: absolute;
  left: -160px;
  top:-2px;
  color:#666
}
.handler{
  color:#999
}
.processedName{
  color:#000
}
.text-value{
  font-size: 0.875rem;
  line-height:2.25rem;
  color:#666;
  font-weight: 700;
}
</style>
